<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<body class="gray-bg">
	
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="role-form">
					<div class="select-list">
						<ul>
							<li class="select-time">
								<label>开始时间： </label>
								<input type="text" class="time-input" id="beginTime" th:value="${beginTime}" readonly placeholder="开始日期" name="beginTime"/>
								<span>-</span>
								<input type="text" class="time-input" id="endTime" th:value="${endTime}" readonly placeholder="结束日期" name="endTime"/>
							</li>
							<li>
								<input type="hidden" name="stationCodes" id="stationCodes">
								站名：
								<select id="stationCode"  name="stationCode" class="selectpicker show-tick" multiple title="请选择">
									<option th:each="sta : ${stations}" th:text="${sta.name}" th:value="${sta.num}"></option>
								</select>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="reLoad()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="reReset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
		
			<div class="btn-group-sm hidden-xs" id="toolbar" role="group">
		        <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="statistics:stake:export">
		            <i class="fa fa-download"></i> 导出
		        </a>
	        </div>
	        
	        <div class="col-sm-12 select-table table-striped">
			    <table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>
	<script th:inline="javascript">
        var detailFlag = [[${@permission.hasPermi('statistics:stake:detail')}]];
		var prefix = ctx + "statistics/stake";
		$(function() {
		    var options = {
		        url: prefix + "/list",
		        exportUrl: prefix + "/export",
                queryParams: queryParams,
		        sortName: "stakeCode",
		        modalName: "单桩统计报表",
		        search: false,
		        showExport: false,
		        columns: [
		        {
		            field: 'stakeCode',
		            title: '桩号',
                    width:'14%'
		        },
		        {
		            field: 'stationName',
		            title: '站名',
                    width:'20%'
                },
		        {
		            field: 'chargeDn',
		            title: '充电电量(度)',
                    width:'8%'
		        },
		        {
		            field: 'chargeLong',
		            title: '充电时长',
                    width:'14%',
                    formatter: function (value, row, index) {
                        return formatSeconds(value)
                    }
		        },
		        {
		            field: 'payNumberPlan',
		            title: '应收金额(元)',
                    width:'14%'
		        },
		        {
		            field: 'payNumber',
		            title: '实收金额(元)',
                    width:'14%',
                    formatter: function(value, row, index) {
                        var offMoney = row.offMoney ==null ? 0 : row.offMoney;
                        var payNumberPlan = row.payNumberPlan ==null ? 0 : row.payNumberPlan;
                        var value = (payNumberPlan-offMoney).toString();
                        value = value.substr(0,value.indexOf(".")+3);
                        return value;
                    }
                },
				{
					field: 'offMoney',
					title: '优惠金额(元)',
					width:'14%'
				}/*,
				{
					field: 'refundPrice',
					title: '退款金额(元)',
					width:'14%'
				}*/,
		        {
		            title: '操作',
                    width:'14%',
                    align: 'center',
		            formatter: function(value, row, index) {
		                var actions = [];
                        actions.push('<a class="btn btn-info btn-xs ' + detailFlag + '" href="#" onclick="detail(\'' + row.stakeCode + '\')"><i class="fa fa-list-ul"></i>明细</a> ');
                        return actions.join('');
		            }
		        }]
		    };
		    $.table.init(options);
		});

        /*单桩详细列表*/
        function detail(stakeCode) {
            var url = prefix + '/detail/' + stakeCode+","+$('#beginTime').val()+","+$('#endTime').val();;
            createMenuItem(url, "单桩明细");
        }
        //下拉框改变的时候赋值
        $("#stationCode").change(function(){
            $("input[name=stationCodes]").val($("#stationCode").val());
        })

        function queryParams(params) {
            return {
                stationCodes:   $("#stationCodes").val(),
                beginTime:   $("#beginTime").val(),
                endTime:   $("#endTime").val(),
                pageSize:       params.limit,
                pageNum:        params.offset / params.limit + 1,
                searchValue:    params.search,
                orderByColumn:  params.sort,
                isAsc:          params.order
            };
        }

        function reLoad() {
            var beginTime = $('#beginTime').val();
            var endTime = $('#endTime').val();
            if (beginTime === '' || endTime === ''){
                $.modal.alertWarning("开始日期或结束日期不能为空");
                return;
            }
            $('#bootstrap-table').bootstrapTable('refresh');
        }

        //重置
        function reReset() {
            $('#beginTime').val('');
            $('#endTime').val('');
            $("#stationCode").selectpicker('deselectAll');
        }
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
</body>
</html>